import 'dart:convert';

import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/entity/user_center/khh_list_entity.dart';
import 'package:cbec_app/pages/my/controller/bank_ctr.dart';
import 'package:cbec_app/utils/ThemeConfig.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/**
 * 添加银行卡
 */

class AddBankCard extends StatelessWidget {
  AddBankCard({super.key});

  final BankController BkCtr = Get.find<BankController>();
  @override
  Widget build(BuildContext context) {
    return BasePage(
      title: "编辑/绑定银行卡",
      iconType: IconType.back,
      bodyColor: Colors.white,
      children: [
        // _cardType(),
        TextInpt(title: "姓名", desc: "请输入姓名", controllers: BkCtr.nameTxtCtr),
        TextInpt(title: "身份证号", desc: "请输入身份证号", controllers: BkCtr.idcardTxtCtr),
        TextInpt(
          title: "银行卡号",
          desc: "请输入银行卡号",
          controllers: BkCtr.bankCardTxtCtr,
          // rigetWidget: InkWell(
          //   onTap: () => {print("摄像头识别")},
          //   child: const Icon(Icons.camera_alt_outlined),
          // )
        ),
        _cardBank(context),
        TextInpt(title: "预留手机号", desc: "请输入预留手机号", controllers: BkCtr.phoneTxtCtr),
        TextInpt(
          title: "图形验证码",
          desc: "请输入验证码",
          txtWidth: 100.w,
          controllers: BkCtr.vertifyTxtCtr,
          rigetWidget: Row(
            children: [
              SizedBox(
                width: 10.w,
              ),
              Container(
                child: BaseInteractive(
                  onClick: () => {BkCtr.getImageCodes()},
                  childWidget: Obx(() => Image.memory(base64Decode(BkCtr.captchaImg.value.split(',').last), width: 90, height: 50)),
                ),
              )
            ],
          ),
        ),
        TextInpt(
          title: "验证码",
          desc: "请输入验证码",
          controllers: BkCtr.phonevertifyTxtCtr,
          rigetWidget: Row(
            children: [
              SizedBox(width: 10.w),
              Obx(() => BaseInteractive(
                    onClick: () {
                      BkCtr.startCountdown();
                    },
                    childWidget: Text(
                      BkCtr.countdownTxt.value,
                      style: setTextStyle(14, FontWeight.w400, ThemeConfig.themeColor),
                    ),
                  ))
            ],
          ),
        ),

        //按钮部分
        SizedBox(
          height: 40.h,
        ),
        Container(
          padding: EdgeInsets.only(left: 18.w, right: 18.w),
          child: solidButton("确认提交", height: 30, () {
            BkCtr.submit();
          }),
        )
      ],
    );
  }

  /**
   * 银行卡类型选择
   */
  Widget _cardType() => Container(
        padding: EdgeInsets.fromLTRB(20.w, 20.w, 20.w, 0.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("类型:"),
            Container(
              // color: Colors.red,
              margin: EdgeInsets.only(right: 30.w),
              width: 250.w,
              // color: Colors.red,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Obx(() => Radio(
                        visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
                        value: 1,
                        groupValue: BkCtr.cardType.value,
                        onChanged: (value) {
                          BkCtr.cardType.value = value!;
                        },
                        activeColor: Tools.fromHex("#D81E06"),
                      )),
                  const Text("个人"),
                  SizedBox(
                    width: 20.w,
                  ),
                  Obx(() => Radio(
                        visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
                        value: 2,
                        groupValue: BkCtr.cardType.value,
                        onChanged: (value) {
                          BkCtr.cardType.value = value!;
                        },
                        activeColor: Tools.fromHex("#D81E06"),
                      )),
                  const Text("企业"),
                ],
              ),
            )
          ],
        ),
      );

  /**
   * 开户行选择
   */
  Widget _cardBank(context) => InkWell(
        onTap: () => {
          showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                    alignment: Alignment.topCenter,
                    padding: EdgeInsets.only(left: 18.w, right: 18.w, top: 10.w),
                    decoration: border_radis(Colors.white),
                    child: ListView.builder(
                        itemCount: BkCtr.khhlist?.length,
                        itemBuilder: (context, index) {
                          final KhhListEntity? item = BkCtr.khhlist![index];
                          return bankItem(index, item!.name.toString(), icon: item.icon.toString());
                        }));
              })
        },
        child: Container(
          decoration: bottom_gary_border,
          padding: EdgeInsets.fromLTRB(20.w, 10.w, 0.w, 10.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text("开户行:"),
              Container(
                margin: EdgeInsets.only(right: 30.w),
                child: Obx(() => Row(
                      children: [
                        SizedBox(
                          width: 25.w,
                          height: 25,
                          child: CircleAvatar(
                            radius: 50.w,
                            backgroundImage: NetworkImage(BkCtr.kkhIcon == '' ? "default_avatar.png" : BkCtr.kkhIcon.toString()),
                          ),
                        ),
                        SizedBox(
                          width: 10.w,
                        ),
                        Text(BkCtr.kkhName.toString())
                      ],
                    )),
              )
            ],
          ),
        ),
      );

  Widget bankItem(int index, String name, {String icon = ''}) {
    return BaseInteractive(
      onClick: () => {BkCtr.choiseKhh(index), Get.back()},
      childWidget: Container(
        decoration: bottom_gary_border,
        padding: EdgeInsets.only(top: 10.w, bottom: 10.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [BaseImage(url: icon == '' ? "default_avatar.png" : icon, width: 50, height: 50, borderRadius: BorderRadius.circular(25)), SizedBox(width: 30.w), Text(name)],
        ),
      ),
    );
  }
}

/**
 * 文本输入框
 */
class TextInpt extends StatelessWidget {
  final String title;
  final String desc;
  final Widget? rigetWidget;
  final double? txtWidth;
  final TextEditingController controllers;

  const TextInpt({super.key, required this.title, required this.desc, this.rigetWidget, required this.controllers, this.txtWidth = 200});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(20.w, 0.w, 20.w, 0.w),
      padding: EdgeInsets.only(top: 10.w, bottom: 10.w),
      decoration: bottom_gary_border,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("$title:"),
          Row(
            children: [
              Container(
                width: txtWidth,
                child: TextFormField(
                  controller: controllers,
                  decoration: descript(desc),
                  // initialValue: value,
                  textAlign: TextAlign.right,
                ),
              ),
              SizedBox(
                width: 5.w,
              ),
              rigetWidget ?? const SizedBox()
            ],
          )
        ],
      ),
    );
  }
}
